<template>
    <div class="body">
        <a name="dingbu"></a>
        <div class="index-header">
            <div class="top">
                <img src="./img/scanning.png" alt="scanning.png" class="scanning">
                <label>
                    <input type="text" placeholder="搜索">
                </label>
                <img src="./img/mold.png" alt="mold.png" class="mold">
            </div>
            <div class="i-banner">
                <index-banner :swiperSlides="swiperSlides"></index-banner>
             </div>
        <ul class="nav">
            <li>
                <router-link to="/pro_categories">
                    <img src="./img/yoga.png" alt="yoga.png">
                    <p>瑜伽系列</p>
                </router-link>
            </li>
            <li>
                <router-link to="/pro_categories">
                    <img src="./img/bodybuilding.png" alt="bodybuilding.png">
                    <p>健身系列</p>
                </router-link>
            </li>
            <li>
                <router-link to="/pro_categories">
                    <img src="./img/toys.png" alt="toys.png">
                    <p>玩具系列</p>
                </router-link>
            </li>
            <li>
                <router-link to="/pro_categories">
                    <img src="./img/wading.png" alt="wading.png">
                    <p>涉水系列</p>
                </router-link>
            </li>
        </ul>
    </div>
    <div class="index-discount">
        <div class="title">限时优惠</div>
        <ul class="tags">
            <li>
                <router-link to="/prodetails">
                    <div class="discount-img">
                        <img src="./img/dragon-ball.png" alt="dragon-ball.png">
                    </div>
                    <p>珠光瑜伽球直径75cm健身球 环保磨砂大龙球</p>
                </router-link>
            </li>
            <li>
                <router-link to="/prodetails">
                    <div class="discount-img">
                        <img src="./img/yoga-mat.png" alt="yoga-mat.png">
                    </div>
                    <p>NBR瑜伽垫 加大加厚加长防滑瑜伽垫</p>
                </router-link>
            </li>
            <li>
                <router-link to="/prodetails">
                    <div class="discount-img">
                        <img src="./img/yoga-mat.png" alt="yoga-mat.png">
                    </div>
                    <p>NBR瑜伽垫 加大加厚加长防滑瑜伽垫</p>
                </router-link>
            </li>
            <li>
                <router-link to="/prodetails">
                    <div class="discount-img">
                        <img src="./img/dragon-ball.png" alt="dragon-ball.png">
                    </div>
                    <p>珠光瑜伽球直径75cm健身球 环保磨砂大龙球</p>
                </router-link>
            </li>
        </ul>
    </div>
    <div class="index-recommend">
        <div class="title">精品推荐</div>
        <div class="tags">
            <div class="left">
                <router-link to="/prodetails">
                    <div class="left-img">
                        <img src="./img/inhand.png" alt="inhand.png">
                    </div>
                    <p>inhand新款婴儿浴盆宝宝沐浴盆充气浴盆大号加厚婴儿洗澡盆用品</p>
                </router-link>
            </div>
            <div class="right">
                <router-link to="/prodetails" class="right-top">
                    <div class="right-img">
                        <img src="./img/dumbbell-1.png" alt="dumbbell-1.png" class="img-o">
                        <img src="./img/dumbbell-2.png" alt="dumbbell-2.png" class="img-f">
                    </div>
                    <p>女士女式骨头浸塑哑铃 彩色哑铃家用健身运动器材</p>
                </router-link>
                <router-link to="/prodetails" class="right-bottom">
                    <div class="right-imgs">
                        <img src="./img/pads.png" alt="pads.png">
                    </div>
                    <p>NBR瑜伽垫 加大加厚加长防滑瑜伽垫</p>
                </router-link>
            </div>
        </div>
    </div>
    <div class="index-hot">
        <div class="title">热卖TOP</div>
        <router-link to="/prodetails"  class="pads-o">
            <div class="pads-tags">
                <img src="./img/padss.png" alt="padss.png">
                <span>NBR瑜伽垫 加大加厚加长防滑瑜伽垫</span>
            </div>
       </router-link>
        <router-link to="/prodetails" class="pads-f">
            <div class="pads-tags">
                <img src="./img/inhands.png" alt="inhands.png">
                <span>新款婴儿浴盆宝宝沐浴盆充气浴盆大号加厚婴儿洗澡盆用品</span>
            </div>
        </router-link>
        <router-link to="/prodetails" class="pads-t">
            <div class="pads-tags">
                <img src="./img/dragon.png" alt="dragon.png">
                <span>NBR瑜伽垫 加大加厚加长防滑瑜伽垫</span>
            </div>
        </router-link>
    </div>
     <div class="index-footer">
        <img src="./img/diandiandian.png" alt="diandiandian.png">
        <a href="#dingbu" class="btn"><span>返 回 顶 部</span></a>        
   </div>
        <my-footer></my-footer>
    </div>
</template>
<script>
import IndexBanner from "../components/swiper";

export default {
  components: {
    IndexBanner
  },
  data() {
    return {
      swiperSlides: []
    };
  },
  created() {
    this.getImg();
  },
  methods: {
    getImg() {
      this.swiperSlides = [
        require("./img/banner1.png"),
        require("./img/banner2.png"),
        require("./img/banner3.png")
      ];
    }
  }
};
</script>

<style scoped lang='less'>
// @import url('./css/index.css');
@import "./css/index.less";
</style>